/**
 * PositionLimit
 */

var React = require("react");
var tool = require("../../../utils/tool");
var citycodesData = require("../../../data/citycodes.json");
var districtsData = require("../../../data/districts.json");
var DistrictsHelper = require("../../../utils/DistrictsHelper");
const PositionLimit = React.createClass({
    getDefaultProps: function () {
        return {
            data: {},
            root: {}
        }
    },
    getInitialState: function () {
        return {
            custom: 0,
            sw: [],
            ne: [],
            cities: [],
            authority: 0
        }
    },
    componentWillMount: function () {
        DistrictsHelper.setCitycodes(citycodesData);
        DistrictsHelper.setDistricts(districtsData);
    },
    componentWillReceiveProps: function (nextProps) {
        var data = nextProps.data;
        if (data && !tool.isEmptyObject(data)) {
            var custom = data.custom || 0;
            var param = {
                custom: custom,
                authority: data.set_auth || 0
            };
            // 不限制
            if (custom == 0) {
                this.setState(param);
                // 行政区域
            } else if (custom == 1) {
                var cities = data.cities || [];
                if (!cities.length) {
                    cities = [districtsData.stateCode];
                    this.saveData({
                        cities: cities
                    });
                } else {
                    cities = DistrictsHelper.getDistrictNamesByCitycodes(cities);
                    param["cities"] = cities;
                    this.setState(param);
                }
                // 地图区域
            } else if (custom == 2) {
                var sw = data.sw || [], ne = data.ne || [];
                if (!sw.length && !ne.length) {
                    sw = districtsData.stateLnglatSW;
                    ne = districtsData.stateLnglatNE;
                    this.saveData({
                        sw: sw,
                        ne: ne
                    });
                } else {
                    param["sw"] = sw;
                    param["ne"] = ne;
                    this.setState(param);
                }
            }
        }
    },
    handleOnChangeCustom: function (type, isNonauthorized, e) {
        var element = $(e.target), val = parseInt(element.val());

        // 无权限弹窗
        if (isNonauthorized) {
            this.nonauthorizedPopup();
            return;
        }

        var param = {};
        param[type] = val;

        this.saveData(param);
    },
    handleOnOpenDialog: function (type, isNonauthorized) {


        // 无权限弹窗
        if (isNonauthorized) {
            this.nonauthorizedPopup();
            return;
        }

        this.props.updateState('positionLimitDialog',type);
    },
    saveData: function (param) {
        var data = this.props.data;
        this.props.saveRecognizeProperty({
            position_limit: $.extend(data, param)
        })
    },
    nonauthorizedPopup: function () {
        this.props.updateState('popupDialog', "nonauthorized");
    },
    render: function () {
        var custom = this.state.custom;
        var authority = this.state.authority;

        var isNonauthorized = authority === 0;

        var sw = this.state.sw, ne = this.state.ne;
        var cities = this.state.cities;

        var button = "", details = "";
        // 不限制识别位置
        if (custom === 0) {
            details =
                <div className="details-region">
                    <span className="all">所有位置地区</span>
                </div>
            // 按行政区选择
        } else if (custom === 1) {
            button = <span className={"button" + (isNonauthorized ? " disabled" : "")}
                           onClick={ this.handleOnOpenDialog.bind(this, "districts", isNonauthorized) }>选择省份城市</span>
            details =
                <div className="details-region">
                    {
                        cities.map(function (city) {
                            return (
                                <span key={city} className="city">{ city }</span>
                            )
                        })
                    }
                </div>
            // 按地图区域选择
        } else {
            button = <span className={"button" + (isNonauthorized ? " disabled" : "")}
                           onClick={ this.handleOnOpenDialog.bind(this, "map", isNonauthorized) }>选择地图区域</span>
            details =
                <div className="details-region">
                    <span className="axes-item">
                        <span className="title">西南</span>
                        {
                            sw.map(function (axes, index) {
                                return (
                                    <span key={axes} className="axes">{ axes + (index === 0 ? "，" : "")}</span>
                                )
                            })
                        }
                    </span>
                    <span className="axes-item">
                        <span className="title">东北</span>
                        {
                            ne.map(function (axes, index) {
                                return (
                                    <span key={axes} className="axes">{ axes + (index === 0 ? "，" : "")}</span>
                                )
                            })
                        }
                    </span>
                </div>
        }


        return (
            <div className="limit-item position-limit">
                <div className="title">位置限制：</div>
                <div className="region">
                    <select className={isNonauthorized ? "disabled" : ""}
                            onChange={ this.handleOnChangeCustom.bind(this, "custom", isNonauthorized) } name="custom"
                            value={ custom }>
                        <option value="0">不限制识别位置</option>
                        <option value="1">按行政区选择</option>
                        <option value="2">按地图区域选择</option>
                    </select>
                    { button }
                </div>
                <div className="tip">在以下位置区域内作品才能被识别（由于GPS定位精度限制，可能存在一定误差）</div>
                <div className="details">
                    <div className="icon-region">
                        <i></i>
                    </div>
                    { details }
                </div>
            </div>
        )
    }
});

export default PositionLimit;
